<template>
    <ContentWrap>
        <CardTitle title="Error 使用" />
        <code class="code-block mt-20px" >
            &lt;Error type="404" /&gt;<br/>
            &lt;Error type="403" /&gt;<br/>
            &lt;Error type="500" title="自定义错误标题" description="自定义错误描述" /&gt;
        </code>
        <CardTitle title="Error 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const errorType = ref('404')
const customTitle = ref('页面未找到')
const customDescription = ref('抱歉，您访问的页面不存在')

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Error 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>type</td> 
                    <td>String</td>
                    <td>404</td>
                    <td>错误类型，支持 404、403、500</td>
                </tr>
                <tr>
                    <td>title</td>
                    <td>String</td>
                    <td>-</td>
                    <td>自定义错误标题</td>
                </tr>
                <tr>
                    <td>description</td>
                    <td>String</td>
                    <td>-</td>
                    <td>自定义错误描述</td>
                </tr>
            </tbody>
        </table>
        <CardTitle title="Error 示例" />
       <div class="mt-20px">
            <div class="error-demo-container">
                <EButton @click="showError404">显示404错误</EButton>
                <EButton @click="showError403">显示403错误</EButton>
                <EButton @click="showError500">显示500错误</EButton>
                <EButton @click="showCustomError">显示自定义错误</EButton>
            </div>
            
            <div class="error-preview" v-if="currentErrorType">
                <Error 
                    :type="currentErrorType"
                    :title="customTitle"
                    :description="customDescription"
                />
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentErrorType = ref('')
const customTitle = ref('')
const customDescription = ref('')

const showError404 = () => {
    currentErrorType.value = '404'
    customTitle.value = ''
    customDescription.value = ''
}

const showError403 = () => {
    currentErrorType.value = '403'
    customTitle.value = ''
    customDescription.value = ''
}

const showError500 = () => {
    currentErrorType.value = '500'
    customTitle.value = ''
    customDescription.value = ''
}

const showCustomError = () => {
    currentErrorType.value = '404'
    customTitle.value = '自定义错误标题'
    customDescription.value = '这是一个自定义的错误描述信息，可以根据实际需求进行定制'
}
</script>

<style lang="scss" scoped>
.error-demo-container {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.error-preview {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    background: #fafafa;
    min-height: 300px;
}
</style> 